<template>
  <div id="musicsearch">
    <input class="searchinput" v-model="seachvalue" type="search" placeholder="搜索音乐" id="" ref="Ref_searcg"  @keyup.enter="getseachvalue()">
  </div>
</template>

<script>
export default {
  name:'MusicSearch',
  data() {
    return {
      //搜索的值
      seachvalue:null
    }
  },
  methods:{
    //获取seach中的值
    getseachvalue() {
      //console.log(this.$route);
      /*
      // 判断路由中的meta.seach是否为true
      // true:拿取当前的路由query的信息进行另一个seach模块的转跳
      // false：进行默认路由跳转
      // .catch：是为了重复路由跳转的报错
      */
      if (this.$route.meta.seach) {
        this.$router.push({
          path: this.$route.path,
          query:{
            type:this.$route.query.type,
            offset:0,
            keywords:this.seachvalue
          }
        })
        .catch(err => err)
      } else {
        this.$router.push({
          path: '/SeachMusic/SongSingle',
          query:{
            type:1,
            offset:0,
            keywords:this.seachvalue
          }
        })
        .catch(err => err)
      }
    }
  }

}
</script>

<style>
#musicsearch {
  width: 15vw;

  padding-top: 1rem;
}
.searchinput {
  height: 1.5rem;
  border: 0;
  box-shadow: 0 0 1px 1px;
  border-radius: 1rem;
  outline:0;
}
</style>